let page = document.getElementsByClassName("page")[0];
let details_page = document.getElementsByClassName("details_page")[0];
let search_page = document.getElementsByClassName("search_page")[0];

//初始化
function init() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let data = JSON.parse(xhr.responseText);
            page.innerHTML = "";
            page.innerHTML = renderingLabel(data);
        }
    }
    xhr.open("GET", `/api/blog/getBlog`, false)
    xhr.send()
}
init()

//初始化渲染函数
function renderingLabel(data) {
    let pageinnerHTML = "";
    for (let index = 0; index < data.length; index++) {
        let biaoqianHTML = "";
        for (let i = 0; i < data[index].Classes.length; i++) {
            biaoqianHTML += `<span>${data[index].Classes[i].labelClass}</span>`;
        }
        pageinnerHTML += `
        <div id="${data[index].id}" onclick="bokeDetails(this)">
            <h1>${data[index].label}</h1>
            <div class="p">${data[index].abstract}</div>
            <div class="biaoqian"> 
                <div>
                    <span>发布时间：<span>${data[index].time}</span></span>
                    <span>浏览量：<span>${data[index].visitsNum}</span></span>
                </div>
                <div>
                    ${biaoqianHTML}
                </div>
            </div>
        </div>
        `
    }
    return pageinnerHTML;
}

// let srcs = document.getElementsByClassName("src")[0]

function bokeDetails(obj) {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let data = JSON.parse(xhr.responseText);
            page.style.display = "none"
            details_page.style.display = "block"
            xrDetails(data);
            window.scrollTo(0, 0);
            let scr = document.createElement("script");
            scr.src = "./js/prism.js"
            scr.className = "src";
            document.body.appendChild(scr);
        }
    }
    xhr.open("POST", `/api/blog/bokeDetails`, false)
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    xhr.send(`id=${obj.id}`)
}

//详情页渲染函数
function xrDetails(data) {
    details_page.innerHTML = "";
    let biaoqianHTML = "";
    for (let i = 0; i < data.Classes.length; i++) {
        biaoqianHTML += `<span>${data.Classes[i].labelClass}</span>`;
    }
    details_page.innerHTML = `
                <div class="details">
                    <div class="btnDel" onclick="btnDel()">←返回</div>
                    <h1>${data.label}</h1>
                    <div class="p">${data.abstract}</div>
                    <div class="biaoqian">
                        <div>
                            <span>发布时间：<span>${data.time}</span></span>
                            <span>浏览量：<span>${data.visitsNum}</span></span>
                        </div>
                        <div>
                            ${biaoqianHTML}
                        </div>
                    </div>
                    <div class="details_con">
                        ${data.blog}
                    </div>
                </div>
                `
}

//左侧分类
function ClassDetails() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let data = JSON.parse(xhr.responseText)
            let userclass = document.getElementsByClassName("userclass")[0];
            userclass.innerHTML = ""
            for (let index = 0; index < data.length; index++) {
                userclass.innerHTML += `<span>${data[index].labelClass}</span>`
            }
        }
    }
    xhr.open("GET", `/api/class/init`, false)
    xhr.send()
}
ClassDetails()

function btnDel() {
    page.style.display = "block"
    details_page.style.display = "none"
    document.getElementsByClassName("src")[0].remove();
    init()
}

let txt_search = document.getElementsByClassName("txt_search")[0]
let btn_search = document.getElementsByClassName("btn_search")[0]

btn_search.onclick = function () {
    fun();
}

function fun(){
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let data = JSON.parse(xhr.responseText)
            page.style.display = "none";
            search_page.style.display = "block"
            search_page.innerHTML = "";
            search_page.innerHTML += `<span id="btnDel" onclick="btn_page()">←返回</span>`
            search_page.innerHTML += renderingLabels(data);
        }
    }
    xhr.open("GET", `/api/blog/search?txt=${txt_search.value}`, false)
    xhr.send()
}


// 返回主页
function btn_page() {
    page.style.display = "block";
    search_page.style.display = "none"
    init()
    txt_search.value = "";
}

function renderingLabels(data) {
    let pageinnerHTML = "";
    for (let index = 0; index < data.length; index++) {
        let biaoqianHTML = "";
        for (let i = 0; i < data[index].Classes.length; i++) {
            biaoqianHTML += `<span>${data[index].Classes[i].labelClass}</span>`;
        }
        pageinnerHTML += `
        <div id="${data[index].id}" onclick="detailsDetails(this)">
            <h1>${data[index].label}</h1>
            <div class="p">${data[index].abstract}</div>
            <div class="biaoqian"> 
                <div>
                    <span>发布时间：<span>${data[index].time}</span></span>
                    <span>浏览量：<span>${data[index].visitsNum}</span></span>
                </div>
                <div>
                    ${biaoqianHTML}
                </div>
            </div>
        </div>
        `
    }
    return pageinnerHTML;
}

function detailsDetails(obj) {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let data = JSON.parse(xhr.responseText);
            search_page.style.display = "none";
            details_page.style.display = "block";
            searchDetails(data);
            window.scrollTo(0, 0);
            let scr = document.createElement("script");
            scr.src = "./js/prism.js"
            scr.className = "src";
            document.body.appendChild(scr);
        }
    }
    xhr.open("POST", `/api/blog/bokeDetails`, false)
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    xhr.send(`id=${obj.id}`)
}

function searchDetails(data) {
    details_page.innerHTML = "";
    let biaoqianHTML = "";
    for (let i = 0; i < data.Classes.length; i++) {
        biaoqianHTML += `<span>${data.Classes[i].labelClass}</span>`;
    }
    details_page.innerHTML = `
                <div class="details">
                    <div class="btnDel" onclick="btnSearchDetails()">←返回</div>
                    <h1>${data.label}</h1>
                    <div class="p">${data.abstract}</div>
                    <div class="biaoqian">
                        <div>
                            <span>发布时间：<span>${data.time}</span></span>
                            <span>浏览量：<span>${data.visitsNum}</span></span>
                        </div>
                        <div>
                            ${biaoqianHTML}
                        </div>
                    </div>
                    <div class="details_con">
                        ${data.blog}
                    </div>
                </div>
                `
}

function btnSearchDetails() {
    details_page.style.display = "none"
    search_page.style.display = "block"
    document.getElementsByClassName("src")[0].remove();
    fun();
}